<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>

	 <link th:href="@{/asserts/ajax/libs/staps/jquery.steps.css}" rel="stylesheet"/>
	 <style type="text/css">
		label.error{
			top:0px !important ;
		} 
		.wizard > .steps > ul > li {
			width: 33%;
		}
	 </style>

	<div class="ibox-content">
		<p>根据正面的指引完成项目创建</p>

		 <form id="form" action="http://www.zi-han.net/theme/hplus/form_wizard.html#" class="wizard-big">
			<h1>项目信息</h1>
			<fieldset>
				<div class="row">
					<div class="col-sm-12">
					
						<div class="form-group row">
							<label class="col-md-2 col-form-label control-label" for="text-input">名称</label>
							<div class="col-md-9">
								<input class="form-control" id="text-input" type="text" name="applicationName" placeholder="应用名称" required="required">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-md-2 col-form-label control-label" for="email-input">描述</label>
							<div class="col-md-9">
								<input class="form-control" id="email-input" type="text" name="applicationDesc" placeholder="应用描述" required="required">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-md-2 col-form-label control-label" for="email-input">图标</label>
							<div class="col-md-9">
								<span class="form-control" id="applicationIconsLabel" style="cursor:pointer;" readonly="readonly" onclick="showIcons()">
									应用图标
								</span>
								<input type="hidden" id="applicationIcons" name="applicationIcons" />
							</div>
						</div>
						
						<div class="form-group row">
							<label class="col-md-2 col-form-label control-label" for="email-input">应用类型</label>
							<div class="col-md-9">
								<div class="checkbox">
									<label> 
										<input type="checkbox" name="serviceProject"> 服务化 
										<span style="color:gray;margin-left:10px;"> (生成分布式服务工程代码)</span>
									</label>
								</div>
								<div class="checkbox">
									<label> 
										<input type="checkbox" name="dockerProject" checked="checked"> 配置容器 
										<span style="color:gray;margin-left:10px;"> (此功能将生成容器地址并返回)</span>
									</label>
								</div>
							</div>
						</div>
							
					</div>
				</div>

			</fieldset>
			<h1>连接数据库</h1>
			<fieldset>
			
				<!--  
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="text-input">应用名称</label>
					<div class="col-md-9">
						<input class="form-control" id="text-input" type="text"
							name="applicationName" placeholder="应用名称">
					</div>
				</div>
				-->
				
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">数据库连接</label>
					<div class="col-md-9">
						<input class="form-control" id="email-input" type="text" 
							placeholder="例如:jdbc:mysql://localhost:3306/alinesno_cloud_base_storage"
							value="jdbc:mysql://localhost:3306/alinesno_cloud_base_storage"
							name="dbUrl"
							required="required">
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">数据库账号</label>
					<div class="col-md-9">
						<div class="row">
							<div class="col-md-5">
								<input type="text" class="form-control" name="dbUser" placeholder="数据库用户" required="required">
							</div>
							<div class="col-md-5">
								<input type="text" class="form-control" name="dbPwd" placeholder="数据库密码" required="required">
							</div>
						</div>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">作者名称</label>
					<div class="col-md-9">
						<input class="form-control" id="email-input" type="text" name="authorName" placeholder="作者名称" required="required">
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">工程名</label>
					<div class="col-md-9">
						<input class="form-control" type="hidden" value="com.alinesno.cloud" name="packageName" placeholder="包名" >
						<input class="form-control" id="email-input" type="text" name="feignServerPath" placeholder="如: alinesno-cloud-base-boot" required="required">
					</div>
				</div>
			</fieldset>

			<h1>持续集成</h1>
			<fieldset>
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">git仓库地址</label>
					<div class="col-md-9">
						<input class="form-control" id="email-input" type="text"
							placeholder="https://gitee.com/xxx/xxx" name="gitRepositoryUrl" >
					</div>
				</div>
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">git账号</label>
					<div class="col-md-9">
						<div class="row">
							<div class="col-md-5">
								<input type="text" class="form-control" name="gitUserName"
									placeholder="git用户名">
							</div>
							<div class="col-md-5">
								<input type="text" class="form-control" name="gitPassword"
									placeholder="git密码">
							</div>
						</div>
					</div>
				</div>

				<div class="hr-line-dashed"></div>
				
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">Jenkins地址</label>
					<div class="col-md-9">
						<input class="form-control" id="email-input" type="text"
							placeholder="https://jenkins.com/xxx/xxx" name="jenkinsUrl" >
					</div>
				</div>
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">任务名称</label>
					<div class="col-md-9">
						<input class="form-control" id="email-input" type="text"
							name="jenkinsJobname"
							placeholder="任务名称">
					</div>
				</div>
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">jenkins账号</label>
					<div class="col-md-9">
						<div class="row">
							<div class="col-md-5">
								<input type="text" class="form-control" name="jenkinsUserName" placeholder="Jenkins用户名">
							</div>
							<div class="col-md-5">
								<input type="text" class="form-control" name="jenkinsPassword" placeholder="Jenkins密码">
							</div>
						</div>
					</div>
				</div>
			</fieldset>
			
			<!-- 
			<h1>初始化项目</h1>
			<fieldset>
				<label for="acceptTerms">我同意注册条款</label>
			</fieldset>
			-->
			
		</form>
			
	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>
    <script th:src="@{/asserts/ajax/libs/staps/jquery.steps.min.js}"></script>

	<script type="text/javascript">
	    $(document).ready(function () {
	        $("#form").steps({
	            bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) {
	                if (currentIndex > newIndex) {
	                    return true
	                }
	                if (newIndex === 3 && Number($("#age").val()) < 18) {
	                    return false
	                }
	                var form = $(this);
	                if (currentIndex < newIndex) {
	                    $(".body:eq(" + newIndex + ") label.error", form).remove();
	                    $(".body:eq(" + newIndex + ") .error", form).removeClass("error")
	                }
	                form.validate().settings.ignore = ":disabled,:hidden";
	                return form.valid()
	            }, onStepChanged: function (event, currentIndex, priorIndex) {
	                if (currentIndex === 2 && Number($("#age").val()) >= 18) {
	                    $(this).steps("next")
	                }
	                if (currentIndex === 2 && priorIndex === 3) {
	                    $(this).steps("previous")
	                }
	            }, onFinishing: function (event, currentIndex) {
	                var form = $(this);
	                form.validate().settings.ignore = ":disabled";
	                return form.valid()
	            }, onFinished: function (event, currentIndex) {
	                var form = $(this);
	                // form.submit()
	                $.operate.save(ctx + "portal/ucenter/project/buildSave",$('#form').serialize());
	            }
	        }).validate({
	            errorPlacement: function (error, element) {
	                element.before(error)
	            }, rules: {confirm: {equalTo: "#password"}}
	        })
	    });
	</script>
		

</body>
</html>
